import React, { useEffect, useState } from 'react';
import '@/views/Index/Editors/Editors.scss'
import { useNavigate } from "react-router-dom";
import Nav from '../../../components/Nav/Nav'
//导入Editor组件
import { Editor } from '@tinymce/tinymce-react';
import { Button } from 'antd'

interface Props {

}

function Editors(props: Props) {

    let editorRef: any = null

    const log = () => {
        if (editorRef) {
            //通过Editor组件实例, 获取Editor组件的内容
            console.log(editorRef.getContent());
        }
    };

    return (
        <div className='editors'>
            <Nav />
            <div className="list">
                <Editor
                    //apikey需要获取
                    apiKey='EqjFtTz81rMg5KHAN9H7VSDf7V7YBb06'
                    //保存Editor组件的实例
                    onInit={(evt, editor) => editorRef = editor}
                    // initialValue="<p>This is the initial content of the editor.</p>"
                    init={{
                        height: 500,
                        menubar: false,
                        plugins: [
                            'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
                            'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
                            'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
                        ],
                        toolbar: 'undo redo | blocks | ' +
                            'bold italic forecolor | alignleft aligncenter ' +
                            'alignright alignjustify | bullist numlist outdent indent | ' +
                            'removeformat | help',
                        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
                    }}
                />
                <div className="btn">
                    <Button type="primary" onClick={log}>保存</Button>
                </div>
            </div>
        </div>
    );
}

export default Editors;